/**
    webpack.config.js webpack的配置文件
        作用：指示 webpack 干那些活（当你运行 webpack 指令时，会加载里面的配置）
        所有构件工具都是基于 nodejs 平台运行的~模块化默认采用 commonjs

    loader： 1、下载    2、使用（配置loader）
    plugins： 1、下载    2、引用    3、使用（配置plugins）
*/

// resolve 用来拼接绝对路径的方法
const { resolve } = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin');

// html-webpack-plugin
// new htmlWebpackPlugin()   功能：默认会创建一个空的html文件，不会自动引入打包输出的所有资源（js/css）
const htmlPlugin = new htmlWebpackPlugin({
    // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（js/css）
    template: './src/index.html',
    filename: 'index.html'
});


module.exports = {
    // webpack 配置
    // 入口起点
    entry: './src/index.js',
    // 输出
    output: {
        // 输出文件名
        filename: 'build.js',
        // __dirname 是nodejs的变量，代表当前文件的目录的绝对路径,相当于【./】
        // resolve(__dirname,'build') 方法就相当于将这两个目录拼接起来
        path: resolve(__dirname,'build')
    },
    // loader 配置
    module:{
        rules:[
            // 详细的loader配置

            //处理 css 文件打包的加载器，加载器的顺序不能乱写
            //加载器是按照顺序调用（从后往前调用，css-loader->style-loader）
            {
                test: /\.css$/,
                use: [
                    'style-loader', // 创建style标签，将js中的样式资源插入进去，添加到head中生效
                    'css-loader', // 将css文件变成 commonjs 模块加载到js中，里面内容是样式字符串
                    // 'postcss-loader' // 是处理兼css的部分兼容问题
                ]
            },
            //处理 less 文件打包的加载器
            {
                test: /\.less$/,
                use: [
                    'style-loader', 
                    'css-loader', 
                    'less-loader' // 将less文件编译成css文件
                ]
            },
        ]
    },
    plugins:[
        // 详细的plugins的配置
        htmlPlugin
    ],
    mode: 'development', // 开发模式
    // mode: 'production', // 生产模式


}